examples/cms-prismic/src/pages/blog/[...uid].astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

---
import BaseLayout from '@/layouts/BaseLayout.astro'
import AsText from '@/components/Prismic/AsText.astro'
import AsHTML from '@/components/Prismic/AsHTML.astro'
import Date from '@/components/Prismic/Date.astro'
import { initApi, Predicates } from '@/api/prismic.js'

export async function getStaticPaths() {
    const api = await initApi()
    const { results } = await api.query(Predicates.at('document.type', 'blog_post'))
    return results.map(post => ({ params: { uid: post.uid}, props: { post }}))
}

const { post } = Astro.props
const { first_publication_date, data } = post
---
<BaseLayout>
  <article class="box post">
    { data.image && <a href={data.image.url} target="_blank" class="image featured"><img src={data.image.url} alt={data.image.alt} style="max-height: 550px; object-fit: cover; object-position: 50% 65%;" /></a> }
    <header>
      <h2><AsText data={data.title}/></h2>
      <p><Date dateRaw={first_publication_date}/></p>
    </header>
    <AsHTML data={data.content}/>
  </article>
</BaseLayout>